<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my_table></my_table>
</div>
<template id="my_table">
    <table border="1">
        <tr is="my_title"></tr>
        <tbody is="my_body"></tbody>
    </table>
</template>
<template id="my_title">
    <tr><td>编号</td><td>姓名</td><td>年龄</td></tr>
</template>
<template id="my_body">
    <tbody>
        <tr v-for="(stu,index) in stus"><td>{{stu.id}}</td><td>{{stu.name}}</td><td>{{stu.age}}</td></tr>
    </tbody>
</template>
<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<script>
    const my_title={
        template:"#my_title"
    }
    const my_body={
        template:"#my_body",
        data:function(){
            return {
                stus:[{id:1,name:"zhangsan",age:20},{id:2,name:"lisi",age:20}]
            };
        }
    }
    const my_table={
        template:"#my_table",
        components:{
            my_title,
            my_body
        }
    }
    new Vue({
        el:"#app",
        components:{
            my_table
        }
    });
</script>
</body>
</html>